import React from 'react';
import ReactDOM from 'react-dom'
import './addBox.less';

//添加弹框
class Add extends React.Component {
    constructor(props){
        super(props)
        this.state={
            visible:false,
            data:[],
            value:[]
        }
    }
    onOK(){/*获取外部confirm方法*/}
    onCancel(){/*获取外部cancel方法*/}
    // 输入
    handleChange(i,e){
        var newValue=this.state.value;
        newValue[i]=e.target.value;
        this.setState({value:newValue});
    }
    // 完成编辑
    handleClick(){
        var value=[]
        for(var i=0;i<this.props.head.length;i++){
            value[i]=""
        }
        this.setState({
            value:value,
            data:this.state.data.concat([this.state.value])
        })
    }
    // 修改
    handleModify(i,v){
        var newData = this.state.data
        newData[i]=v
        this.setState({
            data: newData
        })
    }
    // 弹框
    show(obj){
        this.setState({
            visible:true,
            title:obj.title||"添加",
            yesBtn:obj.yes||"确定",
            noBtn:obj.no||"取消"
        })
        this.onCancel=obj.cancel
        this.onOK=obj.confirm
    }
    // 关闭弹框
    close(){
        var value=[]
        for(var i=0;i<this.props.head.length;i++){
            value[i]=""
        }
        this.setState({
            visible:false,
            data:[],
            value:value
        })
    }
    // 取消
    handleCancel(){
        this.close()
        this.onCancel()
    }
    // 确认
    handleConfirm(){
        this.setState({
            visible:false
        })
        this.onOK()
    }
    // 获取data
    getData(){
        return this.state.data
    }
    componentDidMount(){
        var value=[]
        for(var i=0;i<this.props.head.length;i++){
            value[i]=""
        }
        this.setState({
            value:value
        })
    }
    render(){
        return this.state.visible?<div className="add-box">
            <div className="add-box-container">
                <div className="title">
                    <h4>{this.state.title}</h4>
                    <div className="ion-close" onClick={this.close.bind(this)}></div>
                </div>
                <div className="add-box-table">
                    <div className="table-head">
                        <table className="ad-table">
                            <thead>
                                <tr>
                                    {
                                        this.props.head.map((h,i)=>{
                                            return <th key={i}>{h}</th>
                                        })
                                    }
                                    <th>操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div className="table-body">
                        <table className="ad-table">
                            <tbody>
                                {
                                    this.state.data.map((d,i)=>{
                                        return <DataRow key={i} value={d} modify={this.handleModify.bind(this,i)}/>
                                    })
                                }
                                <tr>
                                    {
                                        this.state.value.map((v,i)=>{
                                            return <td key={i}><input type="text" className="table-edit" value={v} onChange={this.handleChange.bind(this,i)}/></td>
                                        })
                                    }
                                    <td className="option">
                                        <button className="finish" onClick={this.handleClick.bind(this)}><i className="ion-checkmark"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div className="add-box-btn-group">
                    <input className="cancel" type="button" value="取消" onClick={this.handleCancel.bind(this)}/>
                    <input className="confirm" type="button" value="确认" onClick={this.handleConfirm.bind(this)}/>
                </div>
            </div>
            <div className="add-mask"></div>
        </div>:null
    }
}

//添加弹框--row
class DataRow extends React.Component {
    constructor(props){
        super(props)
        this.state={
            edit:false,
            value:[]
        }
    }
    //完成编辑
    finish(){
        this.setState({
            edit:false
        })
        //处理
        this.props.modify(this.state.value)
    }
    //取消编辑
    cancel(){
        this.setState({
            edit:false
        })
    }
    //开始编辑
    edit(){
        this.setState({
            edit:true
        })
    }
    //编辑中
    doEdit(i,e){
        var v=this.props.value
        v[i]=e.target.value
        this.setState({
            value:v
        })
    }
    //删除
    delete(){

    }
    render(){
        var value = this.props.value
        return <tr className="data-row" >
            {
                value.map((item,i)=>{
                    return <td key={i}>{this.state.edit?<input className="table-edit" type="text" defaultValue={item} onChange={this.doEdit.bind(this,i)}/>:item}</td>
                })
            }
            <td className="option">
                {this.state.edit?<span>
                    <button className="finish" onClick={this.finish.bind(this)}><i className="ion-checkmark"></i></button>
                    <button className="cancel" onClick={this.cancel.bind(this)}><i className="ion-close"></i></button>
                </span>:<span>
                    <button className="edit" onClick={this.edit.bind(this)}><i className="ion-edit"></i></button>
                    <button className="delete" onClick={this.delete.bind(this)}><i className="ion-trash-a"></i></button>
                </span>}
            </td>
        </tr>
    }
}

export default Add
